<template>
    <view>
        <view class="cus-page">
            <view v-if="bottomData.tips" class="tips">{{bottomData.tips}}</view>
            <view class="type-area com-flex com-row-between content">
                <view v-if="bottomData.checked" class="com-flex">
                    <u-checkbox-group style="margin-right:8rpx"
                        v-model="bottomData.checked">
                        <u-checkbox size="40rpx" shape="circle" iconSize="30rpx"></u-checkbox>
                    </u-checkbox-group>
                    <text class="com-minor-color">全选</text>
                </view>
                <view v-else></view>
                <view class="com-flex">
                    <view class="com-flex-col com-col-bottom">
                        <view class="com-m-r-12 com-price-color">
                            <text class="com-font-32 com-font-bold">{{bottomData.price}}</text>
                            <text class="com-font-28">日元</text>
                        </view>
                        <text class="com-font-26 com-minor-color">(余额{{bottomData.rmb}}人民币)</text>
                    </view>
                    <u-button shape="circle"
                        :text="bottomData.button.text" 
                        color="linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%)"
                        :customStyle="{width: bottomData.button.width+'rpx',height:'90rpx',marginLeft:'40rpx',fontSize:'32rpx'}"
                        @click="submit">
                    </u-button>
                </view>
            </view>
            <u-gap v-if="sysInfo.platform == 'devtools'" height="30rpx" bgColor="transparent"></u-gap>
        </view>

        <!-- 底部安全距离 120 + 30 + 64 -->
        <u-gap :height="sysInfo.platform == 'devtools' ? bottomData.tips ? '214rpx': '150rpx' : bottomData.tips ? '184rpx' :'120rpx' " bgColor="transparent"></u-gap>
    </view>
</template>


<script>
export default {
    name:'buttonSsettlement', // 底部结算组件
    components: {},
    props:{
        bottomData:{
            type: Object,
            default:()=>{
                return {
                    tips: "",
                    checked: [],
                    price: 1660,
                    rmb: 53,
                    button: {
                        text: "",
                        width: 190
                    }
                }
            }
        }
    },

    data () {
        return {
            sysInfo: this.mixinGetSysInfo()
        }
    },

    computed: {},
    watch: {},

    mounted() {},

    methods: {
        // 按钮事件
        submit(){

        }
    },
}
</script>


<style scoped lang='scss'>
    .cus-page{
        width: 100%;
        background: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        .content{
            height: 120rpx;
        }
        .tips{
            height: 64rpx;
            background: #EAFAFF;
            font-size: 24rpx;
            color: #02BDF3;
            text-align: center;
            line-height: 64rpx;
        }
    }
</style>